import React, { Component } from 'react';
import AMapLoader from '@amap/amap-jsapi-loader';
import styles from './index.less';
import { mapHeight, mapKey, securityJsCode } from '@/defaultSettings';

class MapContainer extends Component {
  constructor(props) {
    super(props);
    // 设置地图的安全密钥
    window._AMapSecurityConfig = {
      securityJsCode: securityJsCode,
    };
    this.map = {};
    this.placeSearch = {};
    this.state = {
      markers: [],
    };
  }

  // 2.dom渲染成功后进行map对象的创建
  componentDidMount() {
    AMapLoader.load({
      key: mapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.PlaceSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then(AMap => {
        // 地图初始化
        this.initMap();
        // 初始化地图查询
        this.initPlaceSearch();
      })
      .catch(e => {
        console.log(e);
      });
  }

  /**
   * 地图初始化
   */
  initMap = () => {
    this.map = new AMap.Map('container', {
      //设置地图容器id
      viewMode: '2D', //是否为3D地图模式
      zoom: 10, //初始化地图级别
      resizeEnable: true,
      // center: [105.602725, 37.076636], //初始化地图中心点位置
    });
    this.map.on('complete', () => {});
    // 地图被点击
    this.map.on('click', ev => {
      // 触发事件的地理坐标，AMap.LngLat 类型
      const lnglat = ev.lnglat;
      const { lng, lat } = lnglat;
      this.handleLnglatChange({ lng, lat });

      // 创建点覆盖物
      const marker = new AMap.Marker({
        position: new AMap.LngLat(lng, lat),
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        offset: new AMap.Pixel(-13, -30),
      });
      let { markers } = this.state;
      if (markers.length > 0) {
        markers.forEach(each => this.map.remove(each));
      }
      // 清除地图上的覆盖物
      // this.map.clearMap();
      // 添加一个覆盖物
      this.map.add(marker);
      markers = [marker];
      this.setState({ markers });
    });
  };

  /**
   * 初始化地图查询
   */
  initPlaceSearch = () => {
    const autoOptions = {
      pageSize: 3, // 单页显示结果条数
      pageIndex: 1, // 页码
      city: '合肥市', // 兴趣点城市
      citylimit: true, //是否强制限制在设置的城市内搜索
      map: this.map, // 展现结果的地图实例
      panel: 'panel', // 结果列表将在此容器中进行展示。
      autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
    };
    const placeSearch = new AMap.PlaceSearch(autoOptions);
    this.placeSearch = placeSearch;

    // 使用map、panel属性后，POI在地图中对应的Marker被点击时触发
    this.placeSearch.on('markerClick', ev => {
      // console.log(ev);
    });

    // 使用map、panel属性后，选中的POI改变时触发
    this.placeSearch.on('selectChanged', ev => {
      const {
        selected: {
          data: { location },
        },
      } = ev;
      // 获取经纬度
      const { lng, lat } = location;
      this.handleLnglatChange({ lng, lat });
    });
  };

  render() {
    // 1.初始化创建地图容器,div标签作为地图容器，同时为该div指定id属性；
    return (
      <div>
        <div
          id="container"
          className="map"
          style={{ height: `${mapHeight}px`, padding: '0px', margin: '0px', width: '100%' }}
        ></div>
        <div id="panel" className={styles.panel}></div>
      </div>
    );
  }

  /**
   * 经纬度改变
   * @param lng
   * @param lat
   */
  handleLnglatChange = ({ lng, lat }) => {
    const { onLnglatChange } = this.props;
    if (onLnglatChange) {
      onLnglatChange({ lng, lat });
    }
  };

  /**
   * 按照关键字进行查询
   * @param keyword
   */
  searchBy = ({ keyword }) => {
    // 清除地图上的覆盖物
    this.map.clearMap();
    this.placeSearch.search(keyword, (status, result) => {});
  };
}

export default MapContainer;
